<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="run">run:点我</button>
    <child></child>
</div>
</body>
<script>
    // 增加自定义事件的两种方案
    // 1- 在模板中使用组件时增加@xxx属性，属性的值为事件处理函数
    // 2- 通过this.$on(自定义事件的名字，自定义事件的处理函数);
    // 3- 通过this.$emit(自定义事件的名字，参数1，参数2，。。。)来触发。
    // 在组件当中声明的自定义事件，只允许在组件内部触发。
    // 以下函数全部都在Vue.prototype当中声明的。
    // $on:自定义事件，可以被触发多次
    // $once:自定义事件，可以被触发一次
    // $off:移除自定义事件
    // $emit:触发自定义事件
	new Vue({
		el: "#root",
        methods:{
		    run(){
				// console.log("run")
                this.$emit("suibian",1,1,1,1)
            }
        },
        components:{
			Child:{
				template:(`
				    <button @click="fn">点我</button>
				`),
                methods:{
					fn(){
						// console.log("fn",this.a);
                        this.$emit("suibian",1,2,3,4)
                    }
                },
                // 钩子函数。当程序执行到某一个阶段，自动钩起的函数称为钩子函数。
                // 生命周期：组件从创建到销毁的过程，称为组件的生命周期。
                beforeMount(){
					// console.log("挂载之前执行",document.querySelector("button"))
                },
                mounted(){
					// 当组件挂载完成后会自动执行。
					// console.log("当组件挂载完成后会自动执行",document.querySelector("button"));
					// this.a = 100;
					// console.log(this)
                    this.$on("suibian",function(a,b,c,d){
						console.log("suibian",a,b,c,d);
						this.$off("suibian");
                    })
					// this.$once("suibian",function(a,b,c,d){
					// 	console.log("suibian",a,b,c,d);
					// })
                }
            }
        }
	})
</script>
</html>